<template>
  <my-nav-bar title="地址编辑">
    <van-address-edit
      :area-list="areaList"
      :address-info="addressInfo"
      show-search-result
      :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      :area-placeholder="defaultInfo"
      @save="onSave"
      @change-detail="onChangeDetail"
    />
  </my-nav-bar>
</template>

<script>
import MyNavBar from "@/components/MyNavBar";
import {AddressEdit, Toast} from "vant";
import {areaList} from "@vant/area-data";
import {bindAddress} from "@/api/address";
export default {
  name: "AddressEdit",
  components: {
    MyNavBar,
    Toast,
    [AddressEdit.name]: AddressEdit
  },
  data(){
    return {
      areaList:areaList ,
      searchResult: [], // 详细地址搜索结果
      addressInfo: {},
      defaultInfo: "选择省/市/区",
    }
  },
  created() {
    this.addressInfo = {
      name: this.$store.state.user.userInfo.username,
      tel: this.$store.state.user.userInfo.phone,
      province: this.$store.state.user.userInfo.province,
      city: this.$store.state.user.userInfo.city,
      county: this.$store.state.user.userInfo.area,
      addressDetail: this.$store.state.user.userInfo.address
    }
    this.defaultInfo = `${this.$store.state.user.userInfo.province|| "请选择"}/${this.$store.state.user.userInfo.city || "请选择"}/${this.$store.state.user.userInfo.area || "请选择"}`
  },
  methods: {
    onSave(content) {
      console.log(content);
      bindAddress({province: content.province, city: content.city, area: content.county, address: content.addressDetail})
        .then(() => {
          return this.$store.dispatch("user/getInfo");
        })
        .then(res => {
        Toast.success("保存成功");
        this.$router.go(-1);
      })
    },
    onChangeDetail(){

    }
  }
}
</script>

<style scoped>

</style>
